{% extends 'public/layout.html' %}

{% block load_css %}
    <link href="/static/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/css/plugins/chosen/bootstrap-chosen.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-select.css">
<style>

 .pop-box {
        z-index: 9999999999999999; /*这个数值要足够大，才能够显示在最上层*/
        margin-bottom: 20%;
        display: none;
        position: fixed;
        top: 20px;
        right: 20px;
        margin-bottom: 20px;
        opacity: 0.8;
        background-color: black;
    }

    .pop-box-body {
        clear: both;
        margin: 20px;
        padding: 20px;
        background-color: darkgreen;
    }

    #divCover {
        position: fixed;
        z-index: 9999;
        top: 0px;
        left: 0px;
        display: none;
        width: 100%;
        height: 100%;
        opacity: 0.7;
        background-color: navajowhite;
    }

    th,td {
        text-align: center;
        word-wrap: break-word;
        white-space: nowrap;
    }

</style>
{% endblock %}

{% block load_js %}
	<script type="text/javascript" src="/static/js/bootstrap-select.js"></script>
	<script type="text/javascript" src="/static/js/plugins/chosen/chosen.jquery.js"></script>
	<script type="text/javascript" src="/static/js/datepicker/js/laydate.js"></script>
	<script type="text/javascript">
	!function(){
		laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
		laydate({elem: '#demo'});//绑定元素
		}();
		//自定义日期格式
		laydate({
			elem: '#test1',
			format: 'YYYY年MM月DD日',
			festival: true, //显示节日
			choose: function(datas){ //选择日期完毕的回调
				alert('得到：'+datas);
			}
		});

		laydate({
			elem: '#hello3',
			min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
			max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
		});
	</script>

	<script type="text/javascript">
		!function(){
			laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
			laydate({elem: '#demo'});//绑定元素
		}();

		//日期范围限制
		var start = {
			elem: '#stime',
			format: 'YYYY-MM-DD  hh:mm:ss',
			min: '2017-01-10', //设定最小日期为当前日期
			max: '2099-06-16', //最大日期
			istime: true,
			istoday: false,
			choose: function(datas){
				 end.min = datas; //开始日选好后，重置结束日的最小日期
				 end.start = datas //将结束日的初始值设定为开始日
			}
		};

		var end = {
			elem: '#etime',
			format: 'YYYY-MM-DD  hh:mm:ss',
			min: '2016-08-10',
			max: '2099-06-16',
			istime: true,
			istoday: false,
			choose: function(datas){
				start.max = datas; //结束日选好后，充值开始日的最大日期
			}
		};
		laydate(start);
		laydate(end);

		//自定义日期格式
		laydate({
			elem: '#test1',
			format: 'YYYY年MM月DD日',
			festival: true, //显示节日
			choose: function(datas){ //选择日期完毕的回调
				alert('得到：'+datas);
			}
		});

		laydate({
			elem: '#hello3',
			min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
			max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
		});
	</script>

	<script>
	 $(".chosen-select").chosen({no_results_text: "nothing"});
	</script>

{% endblock %}

{% block mbx %}
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-10">
            <h2></h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{% url 'index' %}">仪表盘</a>
                </li>

                <li>
                    <a>监控中心</a>
                </li>


                <li class="active">
                    <strong>MySQL慢查询</strong>
                </li>

            </ol>
        </div>
        <div class="col-sm-2">
        </div>
    </div>
{% endblock %}

{% block body %}

<div class="wrapper wrapper-content animated fadeInRight" style="margin:0px 0px 0px 0px;">
        <div class="row" >
            <form name="asset_form" id="asset_form">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins" >
                        <div class="ibox-title">
                            <h5>{{dbname}}慢查询分析详解</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>


                        <div class="ibox-content" style="overflow:scroll;white-space : nowrap;">
                                <div class="hr-line-dashed"></div>
                                <table class="table table-striped table-bordered table-hover  dataTable " style="white-space: normal;padding-right: 10%">
                                    <tbody>
                                        <tr>
                                            <th class="text-center">数据库</th>
                                            <th class="text-center">{{result.db_max}}</th>
                                            <th class="text-center">用户</th>
                                            <th class="text-center" colspan="4">{{result.user_max}}</th>
                                        </tr>
                                        <tr>
                                            <th class="text-center">校验值</th>
                                            <th class="text-center">{{result.checksum}}</th>
                                            <th class="text-center">次数</th>
                                            <th class="text-center" colspan="4">{{result.ts_cnt}}</th>
                                        </tr>
                                        <tr>
                                            <th class="text-center">首次出现</th>
                                            <th class="text-center">{{result.first_seen}}</th>
                                            <th class="text-center">最近时间</th>
                                            <th class="text-center" colspan="4">{{result.last_seen}}</th>
                                        </tr>
                                        <tr>
                                            <th class="text-center"></th>
                                            <th style="white-space: normal;"colspan="6">{{result.fingerprint}}</th>
                                        </tr>
                                        <tr>
                                            <th class="text-center"></th>
                                            <th style="white-space: normal;" colspan="6">{{result.sample}}</th>
                                        </tr>

                                        <tr>
                                            <th class="text-center" rowspan="2">查询时间</th>
                                            <th class="text-center">Query_time_sum</th>
                                            <th class="text-center">Query_time_min</th>
                                            <th class="text-center">Query_time_max</th>
                                            <th class="text-center">Query_time_pct_95</th>
                                            <th class="text-center">Query_time_stddev</th>
                                            <th class="text-center">Query_time_median</th>
                                        </tr>
                                        <tr>
                                            <th class="text-center">{{result.Query_time_sum}}</th>
                                            <th class="text-center">{{result.Query_time_min}}</th>
                                            <th class="text-center">{{result.Query_time_max}}</th>
                                            <th class="text-center">{{result.Query_time_pct_95}}</th>
                                            <th class="text-center">{{result.Query_time_stddev}}</th>
                                            <th class="text-center">{{result.Query_time_median}}</th>
                                        </tr>

                                        <tr>
                                            <th class="text-center" rowspan="2">锁等待时间</th>
                                            <th class="text-center">Lock_time_sum</th>
                                            <th class="text-center">Lock_time_min</th>
                                            <th class="text-center">Lock_time_max</th>
                                            <th class="text-center">Lock_time_pct_95</th>
                                            <th class="text-center">Lock_time_stddev</th>
                                            <th class="text-center">Lock_time_median</th>
                                        </tr>
                                        <tr>
                                            <th class="text-center">{{result.Lock_time_sum}}</th>
                                            <th class="text-center">{{result.Lock_time_min}}</th>
                                            <th class="text-center">{{result.Lock_time_max}}</th>
                                            <th class="text-center">{{result.Lock_time_pct_95}}</th>
                                            <th class="text-center">{{result.Lock_time_stddev}}</th>
                                            <th class="text-center">{{result.Lock_time_median}}</th>
                                        </tr>

                                        <tr>
                                            <th class="text-center" rowspan="2">发送行数</th>
                                            <th class="text-center">Rows_sent_sum</th>
                                            <th class="text-center">Rows_sent_min</th>
                                            <th class="text-center">Rows_sent_max</th>
                                            <th class="text-center">Rows_sent_pct_95</th>
                                            <th class="text-center">Rows_sent_stddev</th>
                                            <th class="text-center">Rows_sent_median</th>
                                        </tr>
                                        <tr>
                                            <th class="text-center">{{result.Rows_sent_sum}}</th>
                                            <th class="text-center">{{result.Rows_sent_min}}</th>
                                            <th class="text-center">{{result.Rows_sent_max}}</th>
                                            <th class="text-center">{{result.Rows_sent_pct_95}}</th>
                                            <th class="text-center">{{result.Rows_sent_stddev}}</th>
                                            <th class="text-center">{{result.Rows_sent_median}}</th>
                                        </tr>


                                        <tr>
                                            <th class="text-center" rowspan="2">扫描行数</th>
                                            <th class="text-center">Rows_examined_sum</th>
                                            <th class="text-center">Rows_examined_min</th>
                                            <th class="text-center">Rows_examined_max</th>
                                            <th class="text-center">Rows_examined_pct_95</th>
                                            <th class="text-center">Rows_examined_stddev</th>
                                            <th class="text-center">Rows_examined_median</th>
                                        </tr>
                                        <tr>
                                            <th class="text-center">{{result.Rows_examined_sum}}</th>
                                            <th class="text-center">{{result.Rows_examined_min}}</th>
                                            <th class="text-center">{{result.Rows_examined_max}}</th>
                                            <th class="text-center">{{result.Rows_examined_pct_95}}</th>
                                            <th class="text-center">{{result.Rows_examined_stddev}}</th>
                                            <th class="text-center">{{result.Rows_examined_median}}</th>
                                        </tr>
                                    </tbody>
                                </table>
                                </div>
                            </div>
                    </div>
                </div>
            </form>
        </div>
</div>
{% endblock %}